<style lang="scss" scoped>
    $searcbarHeight: 46px;
    $sortbarHeight: 40px;

    .mshop-products {
        padding-top: $searcbarHeight * 2 + $sortbarHeight - 3;
        padding-bottom: 56px;
        background-color: white;
        height: 100%;

        .searchbar {
            position: fixed;
            top: $searcbarHeight;;
            height: $searcbarHeight;
            left: 0;
            width: 100%;
            z-index: 100;
        }

        .sortbar {
            position: fixed;
            top: $searcbarHeight * 2 - 6;
            height: $sortbarHeight;
            left: 0;
            width: 100%;
            z-index: 100;
        }

        .categorys {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: scroll;
            background-color: #f6f6f6;

            .category {
                list-style-type: none;
                padding: .4em;
                display: flex;
                flex-direction: column;
                align-items: center;
                white-space: nowrap;

                .image {
                    img {
                        border-radius: 50%;
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }

        .container {
            $border: 1px solid #eeeeee;
            height: 100%;
            overflow: auto;

            .products {
                .product {
                    display: flex;
                    flex-wrap: nowrap;

                    padding: .4em 0;

                    .image {

                        img {
                            padding: .3em;
                            width: 88px;
                            height: 88px;
                        }
                    }

                    .info {
                        width: 70%;
                        word-break: break-all;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        flex-direction: column;
                        padding: 0em .5em;

                        &:last-child {
                            border-bottom: $border;
                        }

                        font-size: 16px;

                        .name {
                            padding-bottom: .4em;
                        }

                        .price {
                            color: red;

                            &::before {
                                content: '￥';
                                position: relative;
                                top: 1.4px;
                            }
                        }

                        .radio {
                            color: red;

                            &::after {
                                content: '积分';
                                position: relative;
                                padding-left: .3em;
                                font-size: 90%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-products" >
        <div class="searchbar">
            <searchbar :action="do_search" ></searchbar>
        </div>

        <div class="sortbar" >
            <sortbar :list="sort_list" :action="do_sort"></searchbar>
        </div>

        <infinite-scroll :action="infinite_action">

            <div class="container">
                <ul class="categorys" v-if="categorys.length > 0 && !$route.query.categ_id">
                    <li class="category"
                        v-for="category in categorys"
                        track-by="$index"
                        v-link="{path: 'category', query: {
                            categ_id: category.id,
                            categ_name: category.name
                        }, append: true}">
                        <div class="image">
                            <img :src="category.image">
                        </div>
                        <div class="info">
                            <p>{{ category.name }}</p>
                        </div>
                    </li>
                </ul>
                <ul class="products">
                    <li class="product" v-for="product in products" track-by="$index" v-link="{path: '/product/' + product.id}">
                        <div class="image">
                            <img :src="product.image">
                        </div>

                        <div class="info">
                            <p class="name">{{ product.name }}</p>
                            <price :price="product.price" ></price>
                        </div>
                    </li>
                </ul>
            </div>
        </infinite-scroll>

        <tabbar ></tabbar>
    </div>
</template>

<script>
    import productService from 'services/product'
    import Searchbar from 'util-components/searchbar.vue'
    import Sortbar from 'util-components/sortbar.vue'
    import InfiniteScroll from 'util-components/infinite-scroll.vue'
    import Tabbar from 'util-components/tabbar.vue'
    import cacheIniniteFactory from 'lib/cache-infinite'
    import objectUtil from 'util/object'
    import Price from 'util-components/price.vue'

    import Scroller from 'vux-components/scroller'

    const temp_data = {
        products: [
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198.213},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198.3213213},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198.321},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198.1},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198.321323},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198},
            { 'image': '/static/4.jpeg', name: 'Apple iPhone 6s (A1700) 64G 银色 移动联通电信4G手机', 'price': 198}
        ],
        categorys: [
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
            { 'image': '/static/4.jpeg', name: '分类', id: 1},
        ],
        max: 10000
    }

    const sort_list = ['综合', '销量', '价格'];

    export default {
        data () {
            return {
                products: [],
                categorys: [],
                categ_id: false,
                search_value: '',
                querys: '',
                order: '',
                direction: '',
                sort_list: sort_list,
                max: 0,
                cache: new cacheIniniteFactory(),
            }
        },
        components: {
            Searchbar,
            Sortbar,
            InfiniteScroll,
            Tabbar,
            Price,
            Scroller
        },
        computed: {
            numbers () { return this.products.length },
        },
        methods: {
            infinite_action() {
                if (this.numbers < this.max) {
                    return this.add_product().then(data => {
                        for (const product of data.products) {
                            this.products.push(product);
                        }
                    });
                }
            },
            do_search (value) {
                this.search_value = value.join(' ');
                this.add_product({
                    offset: 0,
                    querys: this.search_value,
                }).then(data => {
                    this.max = data.max;
                    this.products = data.products;
                })
            },
            do_sort(order, direction) {
                this.add_product({
                    offset: 0,
                    order: order,
                    direction: direction,
                }).then(data => {
                    this.products = data.products;
                })
            },
            _generate_key(params) {
                let temp_data = Object.assign({}, params);
                temp_data.offset = 0;

                return JSON.stringify(temp_data)
            },
            add_product(options) {
                const params = Object.assign({
                    offset: this.numbers,
                    limit: 10,
                    querys: this.search_value,
                    categ_id: this.categ_id,
                    order: this.order,
                    direction: this.direction
                }, options);

                let cache_history;

                const key = this._generate_key(params);

                if (this.cache.has(key)) {
                    cache_history = this.cache.get(key);
                    if (cache_history.has(params.offset)) {
                        return Promise.resolve(cache_history.get(params.offset));
                    }
                }

                return productService
                    .fetchs(JSON.stringify(params))
                    .then(({data}) => data, () => temp_data)
                    .then(data => {
                        return objectUtil.deep_clone(data);
                    })
                    .then(data => {
                        if (cache_history) {
                            cache_history.set(params.offset, data);
                        } else {
                            this.cache.set(key, params.offset, data);
                        }

                        return data;
                    })
            }
        },
        route: {
            data ({to}) {
                if (to.query.categ_name) {
                    to.router.app.display_header({slot: to.query.categ_name, show_back: true});
                }
                return this.add_product({offset: 0, categ_id: to.query.categ_id})
            }
        }
    }
</script>
